<template>
  <nav-bar>
    <template v-slot:default>我的贷款</template>
  </nav-bar>
  <div class="demo-collapse">
    <el-collapse
      v-model="activeNames"
      @change="handleChange"
      v-for="(item, index) in list"
      :key="index"
    >
      <el-collapse-item name="key">
        <template #title>
          <div class="biao">
            <span>{{ list[index].date_from }}</span>
            <span
              class="status"
              :class="list[index].is_return ? 'inColor' : 'outColor'"
              v-if="list[index].is_return === true"
              >已还款</span
            >
            <span
              class="status"
              :class="list[index].is_return ? 'inColor' : 'outColor'"
              v-else
              >未还款</span
            >
          </div>
        </template>
        <div class="detail">
          <span class="debit_left">账户</span
          ><span class="debit_right">{{ list[index].account }}</span>
        </div>
        <div class="detail">
          <span class="debit_left">金额</span
          ><span class="debit_right">{{ list[index].money }}</span>
        </div>
        <div class="detail">
          <span class="debit_left">借款日期</span
          ><span class="debit_right">{{ list[index].date_from }}</span>
        </div>
        <div class="detail">
          <span class="debit_left">应还款日期</span
          ><span class="debit_right">{{ list[index].date_to }}</span>
        </div>
        <div class="detail">
          <span class="debit_left">是否还款</span
          ><span class="debit_right" v-if="list[index].is_return === true"
            >是</span
          >
          <span class="debit_right" v-else>否</span>
        </div>
        <div class="detail">
          <span class="debit_left">是否延逾期</span
          ><span class="debit_right" v-if="list[index].is_delay === true"
            >是</span
          >
          <span class="debit_right" v-else>否</span>
        </div>
        <div class="detail">
          <span class="debit_left">实际还款日期</span
          ><span class="debit_right">{{ list[index].date_return }}</span>
        </div>
        <el-button
          type="primary"
          class="anniu"
          v-if="list[index].is_return === false"
          >我要还款</el-button
        >
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
import NavBar from "../../components/common/navbar/NavBar.vue";
import { reactive, toRefs } from "vue";
import { queryDebit } from "@/api/debit";
export default {
  setup() {
    const state = reactive({
      list: [],
    });
    const initDebit = async () => {
      const res = await queryDebit(localStorage.getItem("userID"));
      console.log(res);
      state.list = res.data;
    };
    initDebit();
    return {
      ...toRefs(state),
    };
  },
  components: {
    NavBar,
  },
};
</script>
<style lang="scss" scoped>
// .dataList {
//   width: 90%;
//   margin: 60px auto;
//   border: 1px solid #efefef;
//   background-color: #fff;
//   border-radius: 15px;
//   box-shadow: 0 0 8px #fff, 0 5px 13px rgb(0 0 0 / 7%);
// }
.demo-collapse {
  width: 80%;
  margin: 60px auto;
}
.biao {
  width: 88%;
  display: flex;
  justify-content: space-between;
}
.detail {
  display: flex;
  justify-content: space-between;
  line-height: 30px;
}
.debit_left {
  padding-left: 10px;
}
.debit_right {
  padding-right: 10px;
}
.status {
  font-size: 16px;
  color: #67c23a;
}
.inColor {
  color: #67c23a;
}
.outColor {
  color: red;
}
.anniu {
  margin-top: 10px;
}
</style>
